<template>
  <div class="bos">
    <!-- 背景图片 -->
    <div class="beiJ">
      <!-- <img src="@/assets/imgSrc/menhuBJ.gif" alt="" /> -->
      <!-- <img src="@/assets/videos/bg.mp4" alt="" /> -->
      <video autoplay loop muted>
        <source src="@/assets/videos/bj.mp4" type="video/mp4">
      </video>
    </div>
    <!-- 顶部 -->
    <div class="top">
      <div>
        <div class="nav">
          <div class="background-container">
            <!-- 顶部左边 -->
            <div class="navLeft">
              <img src="@/assets/imgSrc/binbao.png" alt="" />
            </div>
            <!-- 顶部中间 -->
            <div style="display: flex">
              <div class="btn" :class="{ active: itemIndex == 1 }" @click="btnClick(1)">首页</div>
              <div class="btn" :class="{ active: itemIndex == 2 }" @click="btnClick(2)">数据大屏</div>
              <div class="btn" :class="{ active: itemIndex == 3 }" @click="btnClick(3)">应用超市</div>
              <div class="btn" :class="{ active: itemIndex == 4 }" @click="jlzx">交流中心</div>
            </div>
            <!-- 顶部右边 -->
            <div style="display: flex; align-items: center; justify-content: center">
              <askingQuestions></askingQuestions>
              <messageReminder></messageReminder>
              <peeling></peeling>
              <fontSettings></fontSettings>
              <loginInformation></loginInformation>
            </div>
          </div>
          <div>
          </div>
          <!-- 动态图片 -->
          <!-- <div style="border-bottom:1px solid #99FCFE;padding: 0;"></div> -->

          <!-- 显示当前选中的 Tab 内容 -->
          <div v-if="itemIndex == 1" style="width: 100vw;">
            <div class="container">
              <div class="homeLeft">
                <weatherTime></weatherTime>
                <taskCenter></taskCenter>
                <subscribeTo></subscribeTo>
              </div>
              <div class="homeCenter">
                <div>
                  <applicationSystem></applicationSystem>
                  <noticeAnnouncement></noticeAnnouncement>
                  <operationCenter></operationCenter>
                </div>
              </div>
              <div class="homeRight">
                <div>
                  <globalSearch></globalSearch>
                  <reportDownload></reportDownload>
                  <netdisk></netdisk>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="itemIndex == 2" style="width: 100vw">数据大屏</div>
        <div v-if="itemIndex == 3" style="width: 100vw;">
          <div>
            <application></application>
          </div>
        </div>
        <div v-if="itemIndex == 4" style="width: 100vw">交流中心</div>
      </div>
    </div>
  </div>
</template>

<script>
import loginInformation from './gateway/gatewayTopRight/loginInformation.vue'
import fontSettings from './gateway/gatewayTopRight/fontSettings.vue'
import peeling from './gateway/gatewayTopRight/peeling.vue'
import messageReminder from './gateway/gatewayTopRight/messageReminder.vue'
import askingQuestions from './gateway/gatewayTopRight/askingQuestions.vue'

import weatherTime from './gateway/gatewayLeft/weatherTime.vue'
import taskCenter from './gateway/gatewayLeft/taskCenter.vue'
import subscribeTo from './gateway/gatewayLeft/subscribeTo.vue'

import applicationSystem from './gateway/gatewayCenter/applicationSystem.vue'
import noticeAnnouncement from './gateway/gatewayCenter/noticeAnnouncement.vue'
import operationCenter from './gateway/gatewayCenter/operationCenter.vue'

import globalSearch from './gateway/gatewayRight/globalSearch.vue'
import reportDownload from './gateway/gatewayRight/reportDownload.vue'
import netdisk from './gateway/gatewayRight/netdisk.vue'

import application from './application/index.vue'

export default {
  name: 'TransitIndex',
  components: {
    // 顶部
    loginInformation,
    fontSettings,
    peeling,
    messageReminder,
    askingQuestions,
    // 首页左边
    weatherTime,
    taskCenter,
    subscribeTo,
    // 首页中间
    applicationSystem,
    noticeAnnouncement,
    operationCenter,
    // 应用商店
    application,
    // 首页右边
    globalSearch,
    reportDownload,
    netdisk,
  },
  data() {
    return {
      itemIndex: 1,
    }
  },
  mounted() {

  },

  methods: {
    btnClick(index) {
      this.itemIndex = index
    },
    jlzx() {
      this.$router.push('/jlzx/jlzx/exchange')
    },
  }
}
</script>

<style lang="less" scoped>
body {
  background: rgb(10, 10, 10) !important;
}

.bos {
  min-height: 100vh;
  min-width: 100vw;
  // overflow: hidden;

  // z-index: -2;
  /* 设置容器高度为浏览器视窗的高度 */
}

.beiJ {
  position: absolute;
  z-index: -1;
  background: #000;

  video {
    width: 100vw;
  }
}

.top {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  // z-index: 99;

  .nav .background-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 20px 20px 20px;

    .navLeft {
      img {
        width: 95%;
        height: 95%;
      }

    }

    .btn {
      font-size: 20px;
      font-weight: 500;
      padding: 0 30px;
      color: #fff;
    }

    .active {
      color: #2fd3ec;
    }
  }

  .container {
    display: flex;
    margin: 50px 30px 0 30px;
    height: 100%;

    .homeLeft,
    .homeRight {

      display: flex;
      flex-direction: column;
      flex: 3;
    }

    .homeCenter {
      flex: 6;
    }
  }
}
</style>